<template>
    <div class="course">
        <p style="color: #606266; font-size: 14px;">
            <i class="el-icon-s-home"></i>
            <span>&nbsp;学生课程</span>
        </p>

        <el-card class="box-card" :body-style="{ padding: '10px 25px' }">
            <table style="border: 1px solid #fff; text-align: center;" width="100%">
                <thead style="background-color: #67A1FF;">
                    <tr>
                        <td>时间</td>
                        <td width="12.5%">周一</td>
                        <td width="12.5%">周二</td>
                        <td width="12.5%">周三</td>
                        <td width="12.5%">周四</td>
                        <td width="12.5%">周五</td>
                        <td width="12.5%">周六</td>
                        <td width="12.5%">周日</td>
                    </tr>
                </thead>
                <tbody style="background-color: #EAF2FF; font-size: 14px;">
                    <tr v-for="course in 10" style="height: 50px;">
                        <td>第{{ course }}节</td>
                        <td v-for="day in 7">
                            <div v-html="getList(day + '-' + course)"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </el-card>



    </div>
</template>

<script>
import { getTeacherList } from '@/api/teacher/course';
export default {
    components: {},
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        getInfo() {
            getTeacherList().then(res => {
                console.log(res)
                res.data.forEach(item => {
                    let info = item.time.split("-").map(item => Number(item))
                    item.list = []
                    for (let i = 0; i < info[2]; i++) {
                        item.list.push(info[0] + "-" + (info[1] + i))
                    }
                })
                this.tableData = res.data
                console.log(this.tableData)
            })
        },
        getList(flag) {
            let str = ""
            this.tableData.forEach(item => {
                if (item.list.includes(flag)) {
                    str = `<p style="font-size:16px">${item.courseName}</p>
                    <p style="font-size:12px;color:#697999;">${item.teacherName}</p>
                    <p style="font-size:12px;color:#697999;">${item.location}</p>`
                }

            })
            return str
        },
        search() {
            this.getList()
        },

    },
    mounted() {
        this.getInfo()
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.course {
    height: 100%;

    .box-card {
        width: 100%;
        height: 96%;
        margin-top: 5px;
        font-size: 14px;
    }
}
</style>